<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="县区" prop="city" v-show="cityShow">
        <el-select
          v-model="queryParams.city"
          clearable
          placeholder="请选择"
          size="small"
          @change="selectlistCity"
        >
          <el-option
            v-for="item in this.citylistData"
            :key="item.deptCode"
            :label="item.deptName"
            :value="item.deptCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="乡镇" prop="town" v-show="townShow">
        <el-select
          v-model="queryParams.town"
          clearable
          placeholder="请选择"
          size="small"
          @change="selectlistTown"
        >
          <el-option
            v-for="item in this.townlistData"
            :key="item.deptCode"
            :label="item.deptName"
            :value="item.deptCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="村" prop="village" v-show="villageShow">
        <el-select
          v-model="queryParams.village"
          clearable
          placeholder="请选择"
          size="small"
          @change="selectlistVillage"
        >
          <el-option
            v-for="item in this.villagelistData"
            :key="item.deptCode"
            :label="item.deptName"
            :value="item.deptCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退耕年份" prop="tyear">
        <el-date-picker
          v-model="queryParams.tyear"
          value-format="yyyy"
          type="year"
          placeholder="选择退耕年份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="承包方名称" prop="cbfmc">
        <el-input
          v-model="queryParams.cbfmc"
          placeholder="请输入承包方名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="告警状态" prop="alarmStatus">
        <el-select
          v-model="queryParams.alarmStatus"
          clearable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in this.alarmStatusList"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>

    <!--    <el-table v-loading="loading" :data="EvaluationAccountingList" :span-method="objectSpanMethod"-->
    <div class="each-one-in-list">
      <div class="show-icon">注释：低于系统评估价 <span style="color: orange">橙色</span> 展示金额 高于系统评估价 <span
        style="color: red">红色</span> 展示金额
      </div>
      <div class="show-signal"></div>
      <el-table v-loading="loading" :data="EvaluationAccountingList"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column width="220" label="行政区划" align="center" prop="county">
          <template slot-scope="scope">
            {{ scope.row.county }} - {{ scope.row.township }} - {{ scope.row.village }}
          </template>
        </el-table-column>
        <!--  <el-table-column label="乡镇" align="center" prop="township"/>
          <el-table-column label="村" align="center" prop="village"/>-->
        <el-table-column label="承包方名称" min-width="180" align="center" prop="cbfmc"/>
        <el-table-column label="地块编码" min-width="120" align="center" prop="dkbm"/>
        <el-table-column label="退耕年份" min-width="60" align="center" prop="tyear"/>
        <el-table-column label="附着物" align="center" prop="fzwlx"/>
        <el-table-column label="面积（亩）" align="center" prop="zmj"/>
        <el-table-column label="评估价（元）" align="center" prop="price">
          <template slot-scope="scope">
             <span v-if="scope.row.lowAlarmStatus=='2'" style="color: orange">{{
                 scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
               }}</span>
            <span v-else>
              <span v-if="scope.row.alarmStatus=='0'">{{
                  scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
                }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{
                scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{
                scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else>{{
                scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            </span>


          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-details"
              @click="handleView(scope.row)"
              v-hasPermi="['evaluation:accounting:query']"
            >
              <svg-icon class="svg" icon-class="details"/>
              详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['evaluation:accounting:edit']"
            >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="承包方编码">
          <el-input v-model="form.cbfbm" placeholder="请输入承包方编码" disabled/><!--@focus="showCbf"-->
        </el-form-item>
        <el-form-item label="承包方名称" prop="cbfmc">
          <el-input v-model="form.cbfmc" placeholder="请输入承包方名称" disabled/>
        </el-form-item>
        <el-form-item label="地块编码" prop="estimatemoney">
          <el-select
            v-model="form.dkbm"
            clearable
            placeholder="请选择地块编码"
            style="width: 100%"
            disabled
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="备注" prop="remarks">
           <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" disabled/>
         </el-form-item>-->
      </el-form>
      <el-divider content-position="left">评估项信息</el-divider>
      <el-table v-loading="loadingpg" :data="pgList" ref="pgTable">
        <el-table-column label="评估项" align="center" prop="evaluationItemName">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{ scope.row.evaluationItemName }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{ scope.row.evaluationItemName }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{ scope.row.evaluationItemName }}</span>
            <span v-else>{{ scope.row.evaluationItemName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面积（亩）" align="center" prop="evaluationArea">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{ scope.row.evaluationArea }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{ scope.row.evaluationArea }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{ scope.row.evaluationArea }}</span>
            <span v-else>{{ scope.row.evaluationArea }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价（元）" align="center" prop="evaluationItemPrice">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else>{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统评估价格（元）" align="center" prop="price">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else>{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评估价格（元）" align="center" prop="price">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" :accountingId="scope.row.accountingId" placeholder="请输入评估价格"
                      @blur="updatePrice(scope.row)" @input="search($event)" @keyup.enter="search"/>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">完 成</el-button>
      </div>
    </el-dialog>

    <!--    详情-->
    <el-dialog :title="title" :visible.sync="openDetails" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="承包方编码">
          <el-input v-model="form.cbfbm" placeholder="请输入承包方编码" disabled/>
        </el-form-item>
        <el-form-item label="承包方名称">
          <el-input v-model="form.cbfmc" placeholder="请输入承包方名称" disabled/>
        </el-form-item>
        <el-form-item label="地块编码" prop="estimatemoney">
          <el-select
            v-model="form.dkbm"
            clearable
            placeholder="请选择地块编码"
            style="width: 100%"
            disabled
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="备注" prop="remarks">
           <el-input v-model="form.remarks" type="textarea" disabled/>
         </el-form-item>-->
      </el-form>
      <el-divider content-position="left">评估项信息</el-divider>
      <el-table v-loading="loadingpg" :data="pgList" ref="pgTable">
        <el-table-column label="评估项" align="center" prop="evaluationItemName">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{ scope.row.evaluationItemName }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{ scope.row.evaluationItemName }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{ scope.row.evaluationItemName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面积（亩）" align="center" prop="evaluationArea">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{ scope.row.evaluationArea }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{ scope.row.evaluationArea }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{ scope.row.evaluationArea }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价（元）" align="center" prop="evaluationItemPrice">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{
                scope.row.evaluationItemPrice == 0 ? "-" : (String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.evaluationItemPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="系统评估价格（元）" align="center" prop="price">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{
                scope.row.calPrice == 0 ? "-" : (String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.calPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评估价格（元）" align="center" prop="price">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{
                scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{
                scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{
                scope.row.price == 0 ? "-" : (String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="120" align="center" prop="remark">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus=='0'">{{ scope.row.remark }}</span>
            <span v-else-if="scope.row.alarmStatus=='1'" style="color: red">{{ scope.row.remark }}</span>
            <span v-else-if="scope.row.alarmStatus=='2'" style="color: orange">{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确  定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="'承包方信息'" :visible.sync="openCBF" width="800px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
        <el-form-item label="县区" prop="city">
          <el-select
            v-model="queryParams.city"
            clearable
            placeholder="请选择"
            size="small"
            style="width: 240px"
            @change="selectCity"
          >
            <el-option
              v-for="item in this.cityData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇" prop="town">
          <el-select
            v-model="queryParams.town"
            clearable
            placeholder="请选择"
            size="small"
            style="width: 240px"
            @change="selectTown"
          >
            <el-option
              v-for="item in this.townData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="村" prop="village">
          <el-select
            v-model="queryParams.village"
            clearable
            placeholder="请选择"
            size="small"
            style="width: 240px"
            @change="selectVillage"
          >
            <el-option
              v-for="item in this.villageData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承包方名称" prop="cbfmc">
          <el-input
            v-model="queryParams.cbfmc"
            placeholder="请输入补偿码或补偿项"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="CBFList" @selection-change="handleSelectionChange">
        <el-table-column label="承包方编码" align="center" prop="cbfbm"/>
        <el-table-column label="承包方名称" align="center" prop="cbfmc"/>
        <el-table-column label="证件号码" align="center" prop="cbfzjhm"/>
        <el-table-column label="联系电话" align="center" prop="lxdh"/>
        <el-table-column label="承包方地址" align="center" prop="cbfdz"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:CBF:edit']"
            >查看地块
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormCbf">确 定</el-button>
        <el-button @click="cancelCbf">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addEvaluationAccounting,
  delEvaluationAccounting,
  exportEvaluationAccounting,
  getEvaluationAccounting,
  listEvaluationAccounting,
  updateEvaluationAccounting
} from "@/api/pggl/evaluationAccounting";
import {childlistUse} from "@/api/system/dept";
import {updateItem} from "@/api/information/item";
import {getInfo} from "@/api/login";

export default {
  name: "EvaluationAccounting",
  data() {
    const validatePrice = (rule, value, callback) => {
      let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/
      if (!value) {
        callback(new Error('单价不能为空'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确格式的单价'))
        this.$set(this.ruleForm, "price", '');
      } else if (value.length > 10) {
        callback(new Error('最多可输入10个字符'))
        this.$set(this.ruleForm, "price", '');
      } else {
        callback();
      }
    };
    return {
      spanArr: [],
      storeTypespanArr: [],
      pgList: [],
      CBFList: [],
      // 遮罩层
      loading: false,
      loadingpg: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      currentData: '',
      city: '',
      town: '',
      village: '',
      cityShow: '',
      townShow: '',
      villageShow: '',
      cityData: [],
      townData: [],
      villageData: [],
      citylist: '',
      townlist: '',
      villagelist: '',
      citylistData: [],
      townlistData: [],
      villagelistData: [],
      alarmStatusList: [
        {
          name: "告警",
          value: "1"
        }, {
          name: "正常",
          value: "0"
        },
      ],
      // 【请填写功能名称】表格数据
      EvaluationAccountingList: [
        {
          xian: '安新县',
          zhen: '三台镇',
          cun: '山西村',
          cbfmc: '张文',
          dkbm: '13063210000000002001',
          fzw: '稻田',
          mj: '19',
          pgj: '111,605',
        }
      ],
      // 弹出层标题
      title: "",
      openCBF: false,
      // 是否显示弹出层
      open: false,
      openDetails: false,
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cbfbm: null,
        cbfmc: null,
        estimatemoney: null,
        appendagesmoney: null,
        remarks: null,
        alarmStatus: null,
        lowAlarmStatus: null,
        by2: null,
        by3: null,
        village: null,
        town: null,
        city: null,
      },
      // 表单参数
      form: {
        cbfbm: ''
      },
      // 表单校验
      rules: {
        price: [{required: true, trigger: 'blur', validator: validatePrice}],
        cbfbm: [
          {required: true, message: "承包方编码不能为空", trigger: "blur"}
        ],
        by1: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ],
        by3: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.getList();
    getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;

      if (deptCode.length == 4) {//新区
        this.cityShow = true;
        this.townShow = true;
        this.villageShow = true;
        childlistUse(deptCode).then(response => {
          this.citylistData = response.data;
        });
      } else if (deptCode.length == 6) {//县
        this.cityShow = false;
        this.townShow = true;
        this.villageShow = true;
        childlistUse(deptCode).then(response => {
          this.townlistData = response.data;
        });
      } else if (deptCode.length == 9) {//镇
        this.cityShow = false;
        this.townShow = false;
        this.villageShow = true;
        childlistUse(deptCode).then(response => {
          this.villagelistData = response.data;
        });
      } else if (deptCode.length == 12) {//村
        this.cityShow = false;
        this.townShow = false;
        this.villageShow = false;
      } else {
        this.childlist(1306);
        this.cityShow = true;
        this.townShow = true;
        this.villageShow = true;
      }
    });
    if (this.EvaluationAccountingList.length > 0) {
      this.getSpanArr(this.EvaluationAccountingList);
      this.getSpanArrStoreType(this.EvaluationAccountingList);
    }
  },
  methods: {
    /*<el-table-column type="selection" width="55" align="center"/>
  <el-table-column label="县区" align="center" prop="county"/>
  <el-table-column label="乡镇" align="center" prop="township"/>
  <el-table-column label="村" align="center" prop="village"/>
  <el-table-column label="承包方" width="200" align="center" prop="cbfmc"/>*/
    getSpanArr(data) {
      let pos = 0
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
        } else {
          // 判断当前元素与上一个元素是否相同
          if (
            data[i].county === data[i - 1].county ||
            data[i].township === data[i - 1].township ||
            data[i].cbfmc === data[i - 1].cbfmc ||
            data[i].village === data[i - 1].village
          ) {
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            pos = i
          }
        }
      }
    },
    getSpanArrStoreType(data) {
      let pos = 0
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.storeTypespanArr.push(1)
        } else {
          // 判断当前元素与上一个元素是否相同
          if (
            data[i].county === data[i - 1].county ||
            data[i].township === data[i - 1].township ||
            data[i].cbfmc === data[i - 1].cbfmc ||
            data[i].village === data[i - 1].village
          ) {
            this.storeTypespanArr[pos] += 1
            this.storeTypespanArr.push(0)
          } else {
            this.storeTypespanArr.push(1)
            pos = i
          }
        }
      }
    },
    objectSpanMethod(data) {
      if (this.EvaluationAccountingList.length > 0) {
        if (data.columnIndex === 1 || data.columnIndex === 2 || data.columnIndex === 3) {
          const _row = this.spanArr[data.rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col,
          }
        }
        if (data.columnIndex == 4) {
          const _row = this.storeTypespanArr[data.rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col,
          }
        }
      }
    },
    /*objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      for (let i=1;i<=4;i++) {
        if (columnIndex === i) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },*/
    search(event) {
      this.currentData = event;
    },
    updatePrice(item) {
      let accountingItemId = item.accountingItemId;
      let price = this.currentData;
      if (price != "" && price != undefined && accountingItemId != "" && accountingItemId != undefined) {
        updateItem({accountingItemId: accountingItemId, price: price}).then(response => {
          if (response.code == 200) {
            this.getList();
            this.currentData = "";
          }
        });
      }
    },
    childlist(deptCode) {
      childlistUse(deptCode).then(response => {
        this.cityData = response.data;
        this.citylistData = response.data;
      });
    },
    // 选择县
    selectlistCity(val) {
      this.queryParams.dkbm = val;
      this.citylist = val;
      childlistUse(val).then(response => {
        this.townlistData = response.data;
      });
    },
    // 选择镇
    selectlistTown(val) {
      this.queryParams.dkbm = val;
      this.townlist = val;
      childlistUse(val).then(response => {
        this.villagelistData = response.data;
      });

    },
    // 选择村
    selectlistVillage(val) {
      this.queryParams.dkbm = val;
      this.villagelist = val;
    },
    // 选择县
    selectCity(val) {
      this.city = val;
      childlistUse(val).then(response => {
        this.townData = response.data;
      });
    },
    // 选择镇
    selectTown(val) {
      this.town = val;
      if (val != "" && val != null) {
        childlistUse(val).then(response => {
          this.villageData = response.data;
        });
      }
    },
    // 选择村
    selectVillage(val) {
      this.village = val;
    },
    showCbf() {
      this.openCBF = true
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.alarmStatus == 1) {
        this.queryParams.lowAlarmStatus = '2';
      } else if (this.queryParams.alarmStatus == 0) {
        this.queryParams.lowAlarmStatus = '0';
      } else {
        this.queryParams.lowAlarmStatus = '';
      }
      listEvaluationAccounting(this.queryParams).then(response => {
        this.EvaluationAccountingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openDetails = false;
      this.reset();
    },
    cancelCbf() {
      this.openCBF = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        cbfbm: null,
        cbfmc: null,
        estimatemoney: null,
        appendagesmoney: null,
        remarks: null,
        by1: null,
        by2: null,
        by3: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.dkbm = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.accountingId || this.ids;
      getEvaluationAccounting(id).then(response => {
        this.form = response.data;
        this.pgList = response.data.items;

        this.open = true;
        this.title = "修改";
      });
    },
    handleView(row) {
      this.reset();
      const id = row.accountingId || this.ids;
      getEvaluationAccounting(id).then(response => {
        this.form = response.data;
        this.pgList = response.data.items;
        this.openDetails = true;
        this.title = "详情";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateEvaluationAccounting(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEvaluationAccounting(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitFormCbf() {
      this.form.cbfbm = 123456789;
      this.form.cbfmc = '张三';
      this.openCBF = false;
      this.$refs["form"].validate(valid => {
      })
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     if (this.form.id != null) {
      //       updateEvaluationAccounting(this.form).then(response => {
      //         this.msgSuccess("修改成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     } else {
      //       addEvaluationAccounting(this.form).then(response => {
      //         this.msgSuccess("新增成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     }
      //   }
      // });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delEvaluationAccounting(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportEvaluationAccounting(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    handleSh() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认审核?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        // return exportEvaluationAccounting(queryParams);
      }).then(response => {
        // this.download(response.msg);
      })
    }
  }
};
</script>
<style>
.myTitle {
  margin: 10px 0;
  color: #1890FF;
  font-size: 16px;
}

.show-icon {
  text-align: center;
  background-color: #5aaafa;
  color: #fff;
  float: right;
  font-size: 12px;
  margin-right: -8px;
  padding: 8px 5px 8px 5px;
  width: 400px;
}

.show-signal {
  border: 4px solid #939393;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  float: right;
  margin-right: -400px;
  margin-top: 29px;
  width: 0;
  height: 0;
}
</style>
